import { List } from 'antd';
import React from 'react';
import { useModel } from '@umijs/max';
import PasswordEdit from './EditPassword';
import { FormattedMessage } from '@umijs/max';

type Unpacked<T> = T extends (infer U)[] ? U : T;

const passwordStrength = [
  <span key="strong" className="strong">强</span>,   // 0 - 强  
  <span key="medium" className="medium">中</span>,  // 1 - 中  
  <span key="weak" className="weak">弱</span>,    // 2 - 弱  
];

const SecurityView: React.FC = () => {

  const { initialState, } = useModel('@@initialState');
  const { currentUserInfo } = initialState || {};
  const strengthIndex = currentUserInfo?.pwdstrength ?? 0;
  // const intl = useIntl();
  // 显示模态框  



  const getData = () => [
    {
      title: '账户密码',
      description: (
        <>
          当前密码强度：
          {/* {passwordStrength.strong} */}
          {passwordStrength[strengthIndex]}
        </>
      ),
      actions: [
        <PasswordEdit
          trigger={
            <a>
              <FormattedMessage id="pages.edit" defaultMessage="edit" />
            </a>
          }
          key="edit"
        />,

      ],
    },

  ];

  const data = getData();
  return (
    <>
      <List<Unpacked<typeof data>>
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item) => (
          <List.Item actions={item.actions}>
            <List.Item.Meta title={item.title} description={item.description} />
          </List.Item>
        )}
      />
    </>
  );
};

export default SecurityView;
